import React from 'react'
import { Tabs } from 'antd-mobile'

function Liability (props) {
  const { clickPlan, selectPlanList, planTabList, diyColor } = props

  return (
    <div className='b-model bgw mb20'>
      <Tabs tabs={planTabList}
        initialPage={0}
        tabBarActiveTextColor={diyColor}
        tabBarUnderlineStyle={{ borderBottom: `2px solid ${diyColor}` }}
        onChange={(tab) => { clickPlan(tab.id) }}
        onTabClick={(tab, index) => { console.log('onTabClick', index, tab) }}
      >
        {selectPlanList && selectPlanList.map((plan, index) =>
          <div className='content' key={plan.channelPlanId}>
            {plan.liabilityList && plan.liabilityList.map((item, index) => {
              if (!item.sumInsured) {
                return null
              }
              return (
                <div className='pl20 pr20 bgw f30 item' key={item.liabilityId + index} >
                  <div className='fl fc8 ell' style={{ width: '70%' }}>{item.liabilityName}</div>
                  <div className='tar fc3 fr'>{T.formatPrice(item.sumInsured)} 円</div>
                </div>)
            }
            )}
          </div>
        )}
      </Tabs>
    </div>
  )
}

export default Liability
